<template>
  <div id="records">
    <van-nav-bar title="新增健康档案" left-arrow left-text="返回" @click-left="onClickLeft" fixed placeholder>
      <template #right>
        <span @click="$router.push(`/HistoricalCases/${detail.id}`)"
          >历史健康档案</span
        >
        <!-- HistoricalCases -->
      </template>
    </van-nav-bar>
    <van-form :scroll-to-error="true">
      <div class="header">
        <van-row type="flex" align="center">
          <van-col span="3" class="avatar">
            <img
              :src="detail.img ? detail.img : require('@/assets/images/avatar.png') "
              alt=""
            />
          </van-col>
          <van-col span="21" :offset="1">
            <div class="gr">
              <span class="name">{{ detail.name }}</span>
              <van-tag plain type="primary" v-if="detail.jibing">{{
                detail.jibing
              }}</van-tag>
              <van-tag plain type="warning" v-if="detail.gwname">{{
                detail.gwname
              }}</van-tag>
            </div>
            <div>健康档案次数：{{ detail.blnums }}次</div>
          </van-col>
        </van-row>
      </div>
      <div class="nav">
        <div class="bt">
          <h1>健康档案标题</h1>
        </div>
        <van-divider
          :style="{ borderColor: 'rgba(225,225,225,.6)', padding: '0 20px' }"
        >
        </van-divider>
        <van-field
          maxlength="50"
          required
          v-model="form.title"
          label="标题"
          placeholder="例如：首次检查健康档案"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
      </div>
      <div class="main">
        <div class="information">
          <h1>基本信息</h1>
          <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
          </van-divider>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                @change="tzChange"
                required
                v-model="form.tizhong"
                label="当前体重"
                placeholder="请输入"
                type="number"
                :rules="[{required: true, message: '请填当前体重' }]"
            /></van-col>
            <van-col span="2" :offset="5" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.tizhong2"
                label="未生病前体重"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="5" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.tizhong3"
                label="一个月前体重"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="5" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.tizhong4"
                label="三个月前体重"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="5" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                required
                v-model="form.shengao"
                label="身高"
                placeholder="请输入"
                type="number"
                @change="shengaoChange"
                :rules="[{ required: true, message: '请填写身高' }]"
            /></van-col>
            <van-col span="2" :offset="5" class="company">cm</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.bmi"
                label="BMI"
                placeholder=""
                type="number"
                readonly
            /></van-col>
            <van-col span="2" :offset="6" class="company">%</van-col>
          </van-row>
          <van-row type="flex" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.gugeji"
                label="骨骼肌"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="5" class="company">kg</van-col>
          </van-row>
        </div>
        <div class="indicator">
          <h1>营养指标</h1>
          <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
          </van-divider>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.na"
                label="钠"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="8" class="company">mmol/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.gai"
                label="钙"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="8" class="company">mmol/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.jia"
                label="钾"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="8" class="company">mmol/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.lin"
                label="磷"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="8" class="company">mmol/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.crp"
                label="CRP"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="10" class="company">mg/dL</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.tbil"
                label="TBIL"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="10" class="company">umd/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.alb"
                label="ALB"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="1" class="company">g/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.alt"
                label="ALT"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="2" :offset="1" class="company">u/L</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21"
              ><van-field
                maxlength="6"
                v-model="form.cr"
                label="Cr"
                placeholder="请输入"
                type="number"
            /></van-col>
            <van-col span="5" :offset="10" class="company">umd/L</van-col>
          </van-row>
        </div>
        <div class="disease">
          <h1>疾病信息</h1>

          <van-cell 
            is-link 
            @click="showPopup"  
            class="fontColor">
            <span class="fontLeft">基础疾病</span>
            <span class="fontRight">{{form.jclist}}</span>
          </van-cell>
          <van-popup 
            v-model="show"
            closeable
            position="bottom"
            :style="{ height: '40%' }">
            <div class="checkbox" >
                <div v-for="(item,index) in result" :key="index">
                    <van-checkbox 
                    v-model="item.checked"
                    @change="onChecked"
                    >{{item.title}}</van-checkbox>
                </div>
            </div>
          </van-popup>


          <van-cell 
            is-link 
            @click="showPopup1"  
            class="fontColor">
            <span class="fontLeft">疾病部位</span>
            <span class="fontRight">{{form.bwlist}}</span>
          </van-cell>
          <van-popup 
            v-model="showAzlx"
            closeable
            position="bottom"
            :style="{ height: '40%' }">
            <div class="checkbox" >
                <div v-for="(item,index) in result1" :key="index">
                    <van-checkbox 
                    v-model="item.checked"
                    @change="onCheckedPicker"
                    >{{item.title}}</van-checkbox>
                </div>
            </div>
          </van-popup>
        </div>
        <div class="complication">
          <h1>并发症</h1>
          <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
          </van-divider>
          <van-field name="radio" label="胸水" input-align="right">
            <template #input>
              <van-radio-group v-model="form.xiongshui" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="腹水" input-align="right">
            <template #input>
              <van-radio-group v-model="form.fushui" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="心包积液" input-align="right">
            <template #input>
              <van-radio-group v-model="form.xinbaojiye" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="肺部感染" input-align="right">
            <template #input>
              <van-radio-group v-model="form.feibuganran" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="肠梗阻" input-align="right">
            <template #input>
              <van-radio-group v-model="form.changgengzhu" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="other">其他</div>
          <van-field
            maxlength="150"
            show-word-limit
            v-model="form.bfz"
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入"
            class="textarea"
          />
        </div>
        <div class="inspectionreport">
          <h1 style="display:block">检查报告</h1>
          <van-uploader
            style="display:block"
            :after-read="afterRead"
            v-model="fileList"
            :before-read="beforeRead"
            :before-delete="deleteImg"
          >
            <img src="@/assets/images/upload.png" alt="" />
          </van-uploader>
          <van-button type="info" :disabled="disabled" @click="submit" native-type="submit" style="width:100%">提交</van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { addbingli } from "@/apis/record";
import { chufangoption } from "@/apis/record";
import { upFilesOne } from "@/apis/record";
import { upFiles, addMedia } from "@/apis/journal";
// 图片压缩
import { uploadImgs } from "../../../config/upload"
export default {
  data() {
    return {
      uploadImgs,
      detail: {},
      Azlx: [],
      fileList: [],
      showAzlx: false,
      message: "",
      radio: "1",
      result:[],
      result1:[],
      show:false,
      disabled:false,
      form: {
        action:'add',
        hzid:'',
        title: "",
        tizhong:"",
        tizhong2:"",
        tizhong3:"",
        tizhong4:"",
        shengao:"",
        bmi:"",
        gugeji:"",
        na:"",
        gai:"",
        jia:"",
        lin:"",
        crp:"",
        tbil:"",
        alb:"",
        alt:"",
        cr:"",
        jclist:"请选择",
        bwlist:"请选择",
        xiongshui:"0",
        fushui:"0",
        xinbaojiye:"0",
        feibuganran:"0",
        changgengzhu:"0",
        bfz:"",
        filenm:[],
        filelist:[]
      }
    };
  },
  methods: {
    
    submit(values) {  
     if(this.form.title!=="" && this.form.tizhong !== "" && this.form.shengao!==""){
        // let datas = new FormData();
        // for (const key in this.form) {
        //     const element = this.form[key];
        //     datas.append(key, element)
        // }
        console.log(this.form)
        addbingli(this.form).then(res => {
          this.$toast("新建健康档案成功");
          this.onClickLeft()
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
     }else{
       this.$toast("请填写完整信息")
     }
    },
    afterRead(file) {
      var fileData = new FormData()
      fileData.append('file',file)
      file.status = 'uploading';
      file.message = '上传中...';
      this.disabled = true
    this.uploadImgs(file)
      setTimeout(()=>{
        if( sessionStorage.getItem('base64') != '' && sessionStorage.getItem('base64')!=null){
         upFiles({file:sessionStorage.getItem('base64')})
          .then(res => {
           if(res.codes == "200"){
              this.form.filelist.push(res.data);
              file.status = '';
              file.message = '';
              this.disabled = false
           }else{
            file.status = 'failed';
            file.message = '上传失败';
            this.disabled = false
           }
          })
          .catch(err => {
            this.disabled = false
            file.status = 'failed';
            file.message = '上传失败';
            this.$toast("上传失败");
            
          });
        sessionStorage.removeItem('base64')
      }else{
        file.status = 'failed';
        file.message = '上传失败';
        this.$toast("上传失败");
      }
      },1600)
    },
    deleteImg(detail,$event) {
      console.log($event)
      this.fileList.forEach((item,index) =>{
        if($event.index == index){
          this.fileList.splice(index,1)
          this.form.filelist.splice(index,1)
        }
      })
      console.log(this.form)
    },
    beforeRead(file) {
      var fileData = new FormData()
      fileData.append('file',file)
      // file.status = 'uploading';
      // file.message = '上传中...';
      // upFilesOne(fileData)
      //   .then(res => {
      //    if(res.codes == "200"){
      //       this.form.filelist.push(res.data);
      //       file.status = '';
      //       file.message = '';
      //       this.disabled = false
      //    }else{
      //     file.status = 'failed';
      //     file.message = '上传失败';
      //     this.disabled = false
      //    }
      //   })
      //   .catch(err => {
      //     this.disabled = false
      //     file.status = 'failed';
      //     file.message = '上传失败';
      //     this.$toast("上传失败");
          
      //   });
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/gif" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg"
      ) {
        this.$toast("请上传图片");
        return false;
      }
      return true;
    },
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (
          file.type !== "image/jpeg" &&
          file.type !== "image/gif" &&
          file.type !== "image/png" &&
          file.type !== "image/jpg"
        ) {
          this.$toast("请上传图片");
          reject();
        } else {
          let img = new File(file, {
            type: file.type
          });
          resolve(img);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    onAzlxConfirm() {

    },
    shengaoChange() {
      let tz = this.form.tizhong
      let sg = (this.form.shengao/100)*(this.form.shengao/100)
      let bmi = tz / sg
      if(tz = ''){
        alert('填写当前体重')
      }else{
        this.form.bmi = bmi.toFixed(2)
      }
     },
     tzChange() {
      let tz = this.form.tizhong
      let sg = (this.form.shengao/100)*(this.form.shengao/100)
      let bmi = tz / sg
      if(sg = !''){
        this.form.bmi = bmi.toFixed(2)
      }
     },
    onChecked:function() {
      let arr = this.result
      let jclist = ''
      for (let index = 0; index < arr.length; index++) {
        if(arr[index].checked == true){
          if(jclist == ''){
            jclist =  arr[index].title
          }else {
            jclist = jclist + ';' + arr[index].title
          }
        }
        
      }
      this.form.jclist = jclist
    },
    onCheckedPicker:function() {
       let arr1 = this.result1
        let bwlist = ''
      for (let index = 0; index < arr1.length; index++) {
        if(arr1[index].checked == true){
           if(bwlist == ''){
             bwlist =  arr1[index].title
          }else {
            bwlist = bwlist + ';' + arr1[index].title
          }
        }
      } 
      this.form.bwlist = bwlist
      
    },
    showPopup:function() {
       this.show = true;
       chufangoption({hzid:this.form.hzid, pid:0,ty:6})
        .then((res) => {
          this.result = res.data.list
          console.log(this.result)
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    showPopup1:function() {
       this.showAzlx = true;
       chufangoption({hzid:this.form.hzid, pid:0,ty:7})
        .then((res) => {
          this.result1 = res.data.list
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    }
  },
  created() {
    let list = decodeURIComponent(this.$route.params.detail);
    this.detail = JSON.parse(list);
    this.form.hzid = this.detail.id
  }
};
</script>

<style lang="less">
#records {
  text-align: left;
  color: #404040;
  padding-bottom: 30px;
  .van-nav-bar__left {
    .van-icon,.van-nav-bar__text {
     color: #404040;
    }
  }
  .gr {
    margin-bottom: 10px;
    .name {
      font-size: 15px;
      font-weight: bold;
    }
  }
  h1 {
    font-size: 18px;
    font-weight: bold;
  }
  .company {
    font-size: 15px;
  }
  .van-nav-bar__right {
    color: #3660c8;
    font-size: 14px;
  }
  .header {
    color: #fff;
    padding: 25px 15px;
    background-image: linear-gradient(to right, #4589ed, #569aff);
    .van-tag--plain {
      background-color: transparent;
    }
    .van-tag--primary.van-tag--plain {
      color: #fff;
    }
    .van-tag--warning.van-tag--plain {
      color: #f7d300;
    }
  }
  .nav {
    background-color: #fff;
    padding-top: 30px;
    margin-bottom: 10px;
    
    h1 {
      font-size: 18px;
      margin-left: 20px;
      font-weight: bold;
    }
    .van-divider {
      margin: 20px 0;
    }
    .van-cell {
      width: 90%;
      margin: 0 auto;
      padding: 0 0 20px 0;
      .van-field__label {
        font-size: 15px;
        margin-left: 5px;
        width: 50px;
      }
    }
  }
  .main {
    .information,
    .indicator,
    .disease,
    .complication,
    .inspectionreport {
      margin-bottom: 10px;
      background-color: #fff;
      padding:30px 15px 0;
    }
    .complication {
      .other {
        margin: 20px 5px 0;
        font-size: 15px;
      }
      .textarea {
        margin-left: 5px;
      }
    }
    .indicator {
      .van-field__label {
        font-size: 15px;
        width: 50px;
        margin-left: 5px;
      }
    }
    .inspectionreport {
      padding-bottom: 20px;
      .van-uploader {
        margin-top: 20px;
        margin-bottom: 27px;
      }
      .van-uploader__preview {
        margin:5px 15px;
        .van-image {
          height: 80px;
          width: 80px;
        }
      }
      .van-uploader__input-wrapper {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .van-button {
        height: 50px;
        font-size: 16px;
      }
    }
    .van-divider {
      margin: 20px 0 0;
    }
    .van-row {
      border-bottom: 1px solid #f5f5f5;
    }
    h1 {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell {
      padding: 20px 0;
      &::after {
        right: 0;
        left: 0;
      }
      .van-field__label {
        font-size: 15px;
        margin-left: 5px;
      }
    }
  }
  .fontColor{
    .fontLeft{
      font-size: 15px;
      width: 120px;
      margin-left: 5px;
    }
    .fontRight{
      display: inline-block;
      margin-right: 10px;
      width: 220px;
      font-size: 15px;
      color: #999999;
    }
    span{
        -webkit-box-flex: 0;
        -webkit-flex: none;
        flex: none;
        box-sizing: border-box;
        width: 6.2em;
        margin-right: 12px;
        color: #404040;
        text-align: left;
        word-wrap: break-word;
    }
  }
  .van-cell__title {
    color: #404040 !important;
  }
  .checkbox{
    width: 90vw;
    // height: 80%;
    margin: 0 auto;
    padding-top: 15%;
    display: flex;
    flex-wrap: wrap;
    div{
      margin: 5px;
      height: 30px;
    }
  }
  .van-cell--required::before{
    left: 0;
  }
}

</style>
